<template>
    <div class="Manage">
        <div>
            <el-table ref="multipleTableRef" :data="tableData.data" style="width: 100%"
                @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="100" />
                <el-table-column property="id" label="科室编号" width="200" />
                <el-table-column property="createtime" label="创建时间" width="200" />
                <el-table-column property="name" label="科室名称" />
                <el-table-column property="maindoctor" label="科室主任" />
                <el-table-column label="科室操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">Edit</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="data.page" v-model:page-size="data.size" :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" />
        </div>

        <!-- 编辑弹出对话框框组件 -->
        <Editdialog :data="editData.data" v-if="editData.data"></Editdialog>

        <!-- 删除弹出对话框框组件 -->
        <!-- <DelDialog :data="delData.data" :isshow="isshow" @show="showDel" v-if="delData.data"></DelDialog> -->
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { dayjs, ElTable, ElMessageBox, ElMessage } from 'element-plus'
import { departmentListReq, departmentDelReq } from '@/API/Synthesis.api'
import Editdialog from './Manage/Editdialog.vue'
interface User {
    createtime: string
    id: number
    maindoctor: string
    name: string
}


const editData = reactive({
    data: null
})
const delData = reactive({
    data: null
})
const isshow = ref(true)
// 编辑
const handleEdit = ( row: User) => {
    editData.data = row
}

// 删除
const handleDelete = (id) => {
    ElMessageBox.confirm(
        '此操作不可逆，确认删除吗？?',
        '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await departmentDelReq({ id })
            const { code, msg } = res.data
            if (code == 1) {
                ElMessage({
                    type: 'success',
                    message: msg,
                })
                dataList()
            }
        })
        .catch(() => {})
}
const showDel = (val) => {
    isshow.value = val

}

const data = reactive({
    page: 1,
    size: 10,
})
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

let tableData = reactive({
    data: [],
    total: 0
})


// 进入页面发送请求
async function dataList() {
    const res = await departmentListReq(data)
    res.data.data.forEach(item => {
        item.createtime = dayjs(item.createtime).format('YYYY-MM-DD')
    })
    tableData.data = res.data.data
    tableData.total = res.data.total
}
watchEffect(() => {
    dataList()
})





</script>

<style scoped lang="scss">
.Manage {
    padding: 20px;
}

.account_content {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;

        .content {
            display: flex;
        }
    }
</style>